<template>
	<div class="zh_login">
		<el-card>
			<el-form :model="user" :rules="rules" ref="loginForm">
				<header>UNI-ADMIN</header>
				<el-form-item prop="username">
					<el-input prefix-icon="el-icon-user" v-model="user.username" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input prefix-icon="el-icon-lock" type="password" v-model="user.password" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="danger" style="width: 100%;" :loading="loading" @click="toLogin('loginForm')">
						{{loading ? '登录中······' : '立即登录'}}
					</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	export default {
		props: [],
		components: {},
		data() {
			return {
				loading: false,
				user: {
					username: "",
					password: "",
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
				}
			};
		},
		created() {

		},
		mounted() {

		},
		methods: {
			// 登录的操作
			toLogin(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.loading = true;
						this.$axios.post("/api/admin/login", this.user).then(res => {
							console.log(res.data);
							// 成功提示
							this.$message.success("恭喜你，登录成功");
							// 保存token值
							this.$store.commit("setUserMsg",res.data);
							// 跳转页面
							this.$router.push("/admin/main");
							this.loading = false;
						}).catch(error => {
							// 错误提示
							this.$message.error(error.response.data.msg)
							setTimeout(() => {
								this.loading = false;
							},1500)
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		computed: {

		},
		watch: {

		}
	};
</script>

<style lang="scss" scoped>
	.zh_login {
		width: 100%;
		height: 600px;
		display: flex;
		justify-content: center;
		align-items: center;
		header {
			width: 100%;
			text-align: center;
			height: 40px;
			line-height: 40px;
			font-weight: bold;
		}
		.el-card {
			width: 30%;
		}
	}
</style>
